import 'package:flutter/material.dart';

/// 本节讲解 Scaffold 组件

void main() {
  runApp(const _MyApp());
}

class _MyApp extends StatelessWidget {
  const _MyApp({super.key});

  // 顶部导航栏,操作栏点击
  void appbarPress() {
    print("AppBar 操作栏...");
  }

  // 顶部导航栏, 导航区域
  void appbarLeadingPress() {
    print("AppBar leading...");
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: "Flutter Scaffold",
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
          useMaterial3: true,
        ),
        home: Scaffold(
            appBar: AppBar(
              // 标题栏区域
              title: const Text("Scaffold Demo"),
              backgroundColor: Theme.of(context).colorScheme.inversePrimary,
              // 操作栏区域
              actions: <Widget>[
                IconButton(
                  onPressed: appbarPress,
                  icon: const Icon(Icons.playlist_play),
                  tooltip: "playlist_play",
                ),
                IconButton(
                  onPressed: appbarPress,
                  icon: const Icon(Icons.playlist_add),
                  tooltip: "playlist_add",
                ),
                IconButton(
                  onPressed: appbarPress,
                  icon: const Icon(Icons.playlist_add_check),
                  tooltip: "playlist_add_check",
                )
              ],
              // 重写导航区域
              leading: IconButton(
                icon: const Icon(Icons.face),
                onPressed: appbarLeadingPress,
              ),
            ),
            body: Container(
              padding: const EdgeInsets.only(top: 20.0, left: 10.0, right: 10.0),
              child: Column(
                children: <Widget>[
                  // Row 和 Column 区别在于一个水平,一个垂直
                  Row(
                    // 控制其中子组件的方向
                    textDirection: TextDirection.rtl,
                    children: [
                      // 方块 A
                      Container(
                        width: 100.0,
                        height: 100.0,
                        color: Colors.blue,
                        alignment: Alignment.center,
                        child: const Text(
                          "A",
                          style: TextStyle(fontSize: 25.0, color: Colors.white),
                        ),
                      ),
                      const Spacer(
                        flex: 1,
                      ),
                      // 方块 B
                      Container(
                        width: 100.0,
                        height: 100.0,
                        color: Colors.green,
                        alignment: Alignment.center,
                        child: const Text(
                          "B",
                          style: TextStyle(fontSize: 25.0, color: Colors.white),
                        ),
                      ),
                      const Spacer(
                        flex: 1,
                      ),
                      // 方块 C
                      Container(
                        width: 100.0,
                        height: 100.0,
                        color: Colors.orange,
                        alignment: Alignment.center,
                        child: const Text(
                          "C",
                          style: TextStyle(fontSize: 25.0, color: Colors.white),
                        ),
                      )
                    ],
                  )
                ],
              ),
            )));
  }
}
